<template>
  <div>
    <video
      style="width: 100%; height: 100%; position: absolute; z-index: -100"
      autoplay
      src="../../assets/videos/VCG42N1498098426.mp4"
      muted
      loop
    ></video>

    <div class="login">
      <p>免密登录</p>
      <h2 style="color: ; font-weight: 400">密码登录</h2>
      <van-form :model="user">
        <van-field
          class="uname"
          v-model="user.phone"
          name="账号"
          placeholder="请输入账号"
          :rules="[{ require: true }]"
        />
        <van-field
          class="pwd"
          v-model="user.upwd"
          type="password"
          name="密码"
          placeholder="密码"
          :rules="[{ require: true }]"
        />
        <div style="width: 100%">
          <van-button
            class="dl"
            round
            block
            type="info"
            native-type="submit"
            @click="Login"
            >登录</van-button
          >
        </div>
        <span>忘记密码?</span>
        <span @click="zhuCe">注册账号</span>
        <p class="yy">
          <van-checkbox v-model="checked" icon-size="14px" checked-color="green"
            >我已阅读并同意 用户协议 和 隐私政策</van-checkbox
          >
        </p>
      </van-form>
    </div>
  </div>
</template>

<script>
import httpApi from "@/http";
import { Toast } from "vant";
import storage from "@/utils/Storage";
export default {
  mounted() {
    storage.set("active", 0);
  },
  data() {
    return {
      user: {
        uid: "",
        uname: "",
        phone: "",
        upwd: "",
        birthday: "",
        headpic: "",
        height: 0,
        nickname: "",
        sex: 0,
        targetweight: "",
        weight: 0,
      },
      checked: true,
    };
  },
  methods: {
    Login() {
      // console.log(this.user);
      let phone = this.user.phone;
      httpApi.userApi.userByPhone({ phone }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          this.user = res.data.data[0];
          if (
            this.user.uname &&
            this.user.birthday &&
            this.user.sex &&
            this.user.weight &&
            this.user.targetweight
          ) {
            storage.set(storage.KEY_USER, res.data.data[0]);
            this.$router.push(`/home/indexV/index`);
          } else {
            this.$router.push(`/name/${this.user.uid}`);
          }
        } else {
          Toast({
            message: "该账号未注册",
            position: "bottom",
            duration: 1000,
          });
        }
      });
    },
    zhuCe() {
      this.$router.push("/register");
    },
  },
};
</script>

<style scoped>
.login {
  padding: 20px 40px;
}

.login > p {
  text-align: right;
  margin-bottom: 60px;
  font-size: 15px;
  color: #666;
}

.login h2 {
  margin-bottom: 40px;
  color: #333;
}

.login .uname,
.pwd {
  background-color: rgba(9, 9, 9, 0.3);
  border-radius: 100px;
  margin: 0 0 20px;
}

.login .dl {
  background-color: #9c8be9;
  border: none;
  margin-bottom: 20px;
}

.login span {
  font-size: 14px;
  margin: 40px;
}

.login .yy {
  font-size: 12px;
  position: absolute;
  bottom: 20px;
  left: 70px;
}
</style>
